<template>
  <div class="min-h-screen bg-gray-50 overflow-hidden">
    <!-- 主要内容区（适配1720-1875宽度） -->
    <div class="max-w-screen-xl mx-auto px-4 py-6">
      <!-- 第一行：系统概览卡片（调整为4列布局） -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3 mb-6">
        <!-- 总任务数（蓝色） -->
        <SystemCard title="总任务数"
                    value="246"
                    subValue="+12"
                    icon="appstore"
                    color="blue" />
        <!-- 运行中任务（绿色） -->
        <SystemCard title="运行中任务"
                    value="18"
                    subValue="+3"
                    icon="loading"
                    color="green" />
        <!-- 用户总数（紫色） -->
        <SystemCard title="用户总数"
                    value="1,286"
                    subValue="+128"
                    icon="user"
                    color="purple" />
        <!-- 算法总数（橙色） -->
        <SystemCard title="算法总数"
                    value="56"
                    subValue="+4"
                    icon="code"
                    color="orange" />
        <!-- 数据库大小（青色） -->
        <SystemCard title="数据库大小"
                    value="2.5 PB"
                    subValue="+8%"
                    icon="database"
                    color="teal" />
      </div>
      <!-- 第二行：系统资源和用户统计（左右分栏） -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <!-- 系统资源监控 -->
        <div class="bg-white rounded-lg shadow-md p-6 h-96">
          <SystemResources :cpuUsage="cpuUsage"
                           :memoryUsage="memoryUsage" />
        </div>

        <!-- 用户统计 -->
        <div class="bg-white rounded-lg shadow-md p-6 h-96">
          <UserStatistics :userTimeRange="userTimeRange"
                          @timeRangeChange="handleTimeRangeChange" />
        </div>
      </div>

      <!-- 第三行：图表区（左右分栏，紧凑布局） -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <!-- 任务类型分布 -->
        <div class="bg-white rounded-lg shadow-md p-6 h-96">
          <TaskTypeDistribution :taskTypeRange="taskTypeRange"
                                @typeRangeChange="handleTaskTypeRangeChange" />
        </div>
        <RunningTaskList :tasks="runningTasks"
                         :searchText="searchText"
                         @search="handleSearch"
                         @viewTask="viewTask"
                         @pauseTask="pauseTask"
                         @stopTask="stopTask" />
      </div>
    </div>
  </div>
</template>


<script lang="ts" setup>
import { ref } from 'vue';
import SystemCard from '../component/SystemCard.vue';
import SystemResources from '../component/SystemResources.vue';
import UserStatistics from '../component/UserStatistics.vue';
import UserSourceDistribution from '../component/UserSourceDistribution.vue';
import TaskTypeDistribution from '../component/TaskTypeDistribution.vue';
import RunningTaskList from '../component/RunningTaskList.vue';

// 状态管理
const cpuUsage = ref(65);
const memoryUsage = ref(72);
const userTimeRange = ref('day');
const taskTypeRange = ref('all');
const searchText = ref('');
const runningTasks = ref([
  {
    id: 1,
    name: '地震波反演分析',
    algorithm: '有限差分法',
    startTime: '2023-10-05 08:30:15',
    estimatedTime: '02:45:00',
    progress: 45,
    status: '进行中',
    resources: 'CPU: 42%, 内存: 2.5GB',
  },
  {
    id: 2,
    name: '地质数据三维建模',
    algorithm: 'OpenGL渲染',
    startTime: '2023-10-05 09:15:00',
    estimatedTime: '03:00:00',
    progress: 32,
    status: '进行中',
    resources: 'CPU: 35%, 内存: 3.8GB',
  },
  {
    id: 3,
    name: '气候模拟分析',
    algorithm: '神经网络预测',
    startTime: '2023-10-04 14:45:20',
    estimatedTime: '12:00:00',
    progress: 85,
    status: '即将完成',
    resources: 'CPU: 78%, 内存: 6.2GB',
  },
  {
    id: 4,
    name: '卫星图像识别',
    algorithm: '卷积神经网络',
    startTime: '2023-10-05 10:00:00',
    estimatedTime: '01:15:00',
    progress: 92,
    status: '即将完成',
    resources: 'CPU: 65%, 内存: 4.5GB',
  },
  {
    id: 5,
    name: '岩石力学测试',
    algorithm: '有限元分析',
    startTime: '2023-10-03 16:20:30',
    estimatedTime: '24:00:00',
    progress: 58,
    status: '进行中',
    resources: 'CPU: 50%, 内存: 5.1GB',
  },
  {
    id: 6,
    name: '地下水流动模拟',
    algorithm: '数值模拟法',
    startTime: '2023-10-05 07:45:10',
    estimatedTime: '04:30:00',
    progress: 28,
    status: '进行中',
    resources: 'CPU: 29%, 内存: 2.1GB',
  },
  {
    id: 7,
    name: '土壤成分分析',
    algorithm: '光谱分析法',
    startTime: '2023-10-04 09:30:00',
    estimatedTime: '01:45:00',
    progress: 15,
    status: '待验证',
    resources: 'CPU: 22%, 内存: 1.8GB',
  },
  {
    id: 8,
    name: '火山活动预测',
    algorithm: '机器学习回归',
    startTime: '2023-10-05 11:10:15',
    estimatedTime: '05:00:00',
    progress: 38,
    status: '进行中',
    resources: 'CPU: 39%, 内存: 3.3GB',
  },
  {
    id: 9,
    name: '冰川消融监测',
    algorithm: '卫星雷达干涉',
    startTime: '2023-10-02 13:00:00',
    estimatedTime: '48:00:00',
    progress: 75,
    status: '进行中',
    resources: 'CPU: 68%, 内存: 7.0GB',
  },
  {
    id: 10,
    name: '地震预警算法优化',
    algorithm: '遗传算法',
    startTime: '2023-10-05 08:45:25',
    estimatedTime: '02:15:00',
    progress: 42,
    status: '进行中',
    resources: 'CPU: 48%, 内存: 2.9GB',
  },
  {
    id: 11,
    name: '大气污染物扩散模拟',
    algorithm: '流体力学模型',
    startTime: '2023-10-04 10:30:40',
    estimatedTime: '06:30:00',
    progress: 55,
    status: '进行中',
    resources: 'CPU: 55%, 内存: 5.7GB',
  },
  {
    id: 12,
    name: '地质灾害风险评估',
    algorithm: '层次分析法',
    startTime: '2023-10-05 12:00:00',
    estimatedTime: '01:30:00',
    progress: 95,
    status: '即将完成',
    resources: 'CPU: 88%, 内存: 4.9GB',
  },
  {
    id: 13,
    name: '海洋潮汐预测模型',
    algorithm: '时间序列分析',
    startTime: '2023-10-03 15:15:30',
    estimatedTime: '18:00:00',
    progress: 65,
    status: '进行中',
    resources: 'CPU: 60%, 内存: 6.5GB',
  },
  {
    id: 14,
    name: '矿物成分检测',
    algorithm: 'X射线衍射法',
    startTime: '2023-10-05 09:20:10',
    estimatedTime: '02:00:00',
    progress: 22,
    status: '待验证',
    resources: 'CPU: 25%, 内存: 2.3GB',
  },
  {
    id: 15,
    name: '地震波形反演',
    algorithm: '反射地震学',
    startTime: '2023-10-04 11:45:00',
    estimatedTime: '03:45:00',
    progress: 33,
    status: '进行中',
    resources: 'CPU: 31%, 内存: 3.6GB',
  },
  {
    id: 16,
    name: '生态环境数据处理',
    algorithm: '大数据聚类',
    startTime: '2023-10-02 10:00:00',
    estimatedTime: '36:00:00',
    progress: 70,
    status: '进行中',
    resources: 'CPU: 72%, 内存: 8.0GB',
  },
  {
    id: 17,
    name: '板块运动模拟',
    algorithm: '板块构造模型',
    startTime: '2023-10-05 13:30:15',
    estimatedTime: '04:15:00',
    progress: 47,
    status: '进行中',
    resources: 'CPU: 44%, 内存: 3.1GB',
  },
  {
    id: 18,
    name: '地下水水质分析',
    algorithm: '化学分析法',
    startTime: '2023-10-04 08:30:00',
    estimatedTime: '01:10:00',
    progress: 12,
    status: '待验证',
    resources: 'CPU: 20%, 内存: 1.5GB',
  },
  {
    id: 19,
    name: '地震应急响应模拟',
    algorithm: '离散事件模拟',
    startTime: '2023-10-03 14:20:45',
    estimatedTime: '10:00:00',
    progress: 80,
    status: '即将完成',
    resources: 'CPU: 75%, 内存: 5.3GB',
  },
  {
    id: 20,
    name: '地质样本数据库构建',
    algorithm: '数据库建模',
    startTime: '2023-10-05 07:00:00',
    estimatedTime: '05:30:00',
    progress: 50,
    status: '进行中',
    resources: 'CPU: 50%, 内存: 4.0GB',
  },
]);

// 事件处理
const handleTimeRangeChange = (value: string) => {
  userTimeRange.value = value;
};

const handleTaskTypeRangeChange = (value: string) => {
  taskTypeRange.value = value;
};

const handleSearch = (value: string) => {
  searchText.value = value;
};

const viewTask = (id: number) => {
  console.log('查看任务:', id);
};

const pauseTask = (id: number) => {
  console.log('暂停任务:', id);
};

const stopTask = (id: number) => {
  console.log('终止任务:', id);
};

// 模拟CPU和内存使用率变化
setInterval(() => {
  cpuUsage.value = parseFloat(Math.max(30, Math.min(90, cpuUsage.value + (Math.random() - 0.5) * 10)).toFixed(2));
  memoryUsage.value = parseFloat(Math.max(40, Math.min(95, memoryUsage.value + (Math.random() - 0.5) * 8)).toFixed(2));
}, 3000);
</script>

<style scoped>
/* 布局优化样式 */
.max-w-screen-xl {
  max-width: 1875px; /* 适配最大宽度 */
}

/* 卡片高度统一 */
.bg-white {
  height: auto;
  max-height: 100%;
}

/* 任务列表高度限制 */
.RunningTaskList {
  max-height: 300px;
  overflow-y: auto;
}

/* 小屏幕下的紧凑布局 */
@media (max-width: 1875px) {
  .lg:grid-cols-5 {
    grid-template-columns: repeat(4, 1fr); /* 宽屏设备显示4列 */
  }
}

@media (max-width: 1720px) {
  .lg:grid-cols-4 {
    grid-template-columns: repeat(3, 1fr); /* 最小宽度显示3列 */
  }
}
</style>